<template>
	<view class="suggestion">
		<view class="head">
			<view class="lt" @click="tocomplaintMy">
				<image src="../../static/server_mag/note.png" mode="widthFix" class="im" style=""></image>
				<text style="">我的投诉&建议</text>
			</view>
			<view class="lt" @click="sevshow">
				<image src="../../static/server_mag/sev.png" mode="widthFix" class="im" style=""></image>
				<text style="">平台客服</text>
			</view>
		</view>
		<view class="guess">
			<view class="title">
				<span class="t-lf">请选择类型</span>
				<view class="t-rt">
					<view @click="ishow = !ishow" style="color: #157AFE;font-size: 26rpx;margin-right: 20rpx;">投诉&建议须知</view>
					<image style="width: 12rpx;" src="../../static/server_mag/right-to.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list" v-for="(item,index) in quesson" :key="index" @click="toselectTyp(item)">
				<view class="list-info">
					<span style="font-size: 30rpx;">{{item.text}}</span>
					<image style="width: 12rpx;" src="../../static/server_mag/right-to.png" mode="widthFix"></image>
				</view>
				<view v-show="quesson.length-index>1" style="border: 1rpx solid #E4E4E4;margin-top: 22rpx;"></view>
				<view v-show="quesson.length-index<=1" style="margin-top: 22rpx;"></view>
			</view>
		</view>
		<view style="padding: 20rpx 64rpx;color: #9D9D99;font-size: 28rpx;line-height: 44rpx;">
			平台声明：平台禁止以任何形式虚假交易、租赁名义开展贷款行为，一旦查实，订单将强制关闭，并移交公安机关处,欢迎用户举报监督。
		</view>

		<u-popup class="tup" :show="ishow" :round="10":safeAreaInsetTop="true" :closeable="popupData.closeable" :closeOnClickOverlay="popupData.closeOnClickOverlay" @close="close">
			<view style="height: 60vh;overflow: auto;">
				<text style="display: flex;justify-content: center;font-size: 32rpx;background-color: #fff;position: sticky;top: 0;">投诉&建议须知</text>
				<view style="padding: 20px 30px;">
					<view style="font-size:30rpx;margin-bottom:50rpx">1、您应保证您的投诉&反馈是出于真实和善意，恶意投诉或反馈将会影响您在平台的信用;</view>
					<view style="font-size:30rpx;margin-bottom:50rpx">2、投诉&反馈启用匿名提交方式，您的信息将严格保密，不会向外提供;</view>
					<view style="font-size:30rpx;margin-bottom:50rpx">3、投诉&反馈一般在3个工作日内给您受理，如有紧急问题。可直接联系人工客服;</view>
					<view style="font-size:30rpx;margin-bottom:50rpx">4、您一天只能提交2次投诉或建议，请谨慎操作。</view>
				</view>
				<view style="background-color: #fff;position: fixed;bottom: 0rpx;width: 100vw;height: 10vh;">
					<u-button
						text="确认"
						customStyle="background: #157AFE;color: #fff;
						border-radius: 40rpx;width: 90vw;height:90rpx;left:35rpx;right: 35rpx;"
						@click="ishow = !ishow"
					></u-button>
				</view>
			</view>
		</u-popup>
		<u-overlay :show="show" :opacity="0.3">
			<view class="warp">
				<view class="rect">
					<view class="list">
						<view class='contact-list'>
							<contact-button size='57' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
							<contact-button size='57' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
							<contact-button size='57' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
							<contact-button size='57' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
							<contact-button size='57' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
							<contact-button size='57' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
							<contact-button size='57' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
							<contact-button size='57' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
							<contact-button size='57' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
							<contact-button size='57' class="online-btn" tnt-inst-id="ilh_9ol2" scene="SCE00183004" />
						</view>
						<view style="display: flex;align-items: center;">
							<image src="../../static/server_mag/mes-one.png" mode="widthFix" style="width: 20%;">
							</image>
							<text style="font-size: 32rpx;margin-left: 30rpx;">在线客服</text>
						</view>
						<image src="../../static/server_mag/right-to.png" mode="widthFix" style="width: 14rpx;"></image>
					</view>
					<u-line></u-line>
					<view class="list" @click="tellphone">
						<view style="display: flex;align-items: center;">
							<image src="../../static/server_mag/cal-one.png" mode="widthFix" style="width: 20%;">
							</image>
							<text style="font-size: 32rpx;margin-left: 30rpx;">热线客服</text>
						</view>
						<image src="../../static/server_mag/right-to.png" mode="widthFix" style="width: 14rpx;"></image>
					</view>
				</view>
				<image src="../../static/server_mag/cle-one.png" mode="widthFix" style="width: 9%;margin-top: 30rpx;"
					@tap.stop="is"></image>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quesson: [
					{	text: '假冒伪劣',
						type: '1'
					},
					{
						text: '品牌侵权',
						type: '2'
					},
					{
						text: '价格欺诈',
						type: '3'
					},
					{
						text: '虚假宣传',
						type: '4'
					},
					{
						text: '以租赁形式从事贷款',
						type: '5'
					},
					{
						text: '产品建议',
						type: '6'
					}
				],
				ishow: false,
				show: false,
				popupData: {
					closeable: true,
					closeOnClickOverlay: true
				},
				phone: '400-085-0889',
			};
		},
		onShow() {},
		mounted() {},
		onLoad() {},
		methods: {
			tellphone() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				});
			},
			close(){
				this.ishow=false
			},
			tocomplaintMy(){
				uni.navigateTo({
				　　url:"/pagesServe/complaintMy/complaintMy"
				})
			},
			toselectTyp(item){
				uni.navigateTo({
				　　url:`/pagesServe/selectTyp/selectTyp?text=${item.text}`
				})
			},
			sevshow() {
				this.show = true
			},
			is() {
				this.show = false
			},
		},
	};
</script>

<style lang="scss" scoped>
	.suggestion {
		.warp {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
		
			.rect {
				width: 560rpx;
				height: 300rpx;
				background-color: #fff;
				border-radius: 20rpx;
		
				.list {
					display: flex;
					align-items: center;
					justify-content: space-around;
					height: 50%;
					position: relative;
				}
				.contact-list {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 150rpx;
					z-index: 100;
					overflow: hidden;
					opacity: 0;
				}
			}
		
		}
		.head {
			padding: 30rpx 0;
			background-color: #fff;
			display: flex;
			justify-content: space-evenly;
			.lt {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.im {
					width: 130rpx;
					height: 130rpx;
				}
			}
		}
		.guess {
			background-color: #fff;
			margin: 30rpx 26rpx;
			border-radius: 20rpx;
			.title {
				padding: 30rpx 32rpx 6rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.t-lf {
					font-size: 32rpx;
					font-weight: 500;
				}
				.t-rt {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
			.list {
				padding: 20rpx 32rpx 6rpx;
				.list-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	}
</style>
